<template>
	<view class="container" v-if="isLoading">
		<view class="head flex-ac" :class="{'tongguo': info.status == 2, 'jujue': info.status == 3 }">
			<view>
				<view class="status" v-if='info.status == 1'>待初审</view>
				<view class="status" v-if='info.status == 22'>待终审</view>
				<view class="status" v-if='info.status == 2'>已通过</view>
				<view class="status" v-if='info.status == 3'>已拒绝</view>
				<view class="time">审核时间：{{info.auditorTime || ''}}</view>
				<view class="time" v-if="info.status == 3">原因：{{info.failReason || ''}}</view>
			</view>
		</view>
		<view class="body">
			<view class="cell flex" style="align-items: flex-start;">
				<view class="hd">申请时间</view>
				<view class="bd">{{info.createTime || ''}}</view>
			</view>
			<view class="cell flex" style="align-items: flex-start;">
				<view class="hd">申请人</view>
				<view class="bd">{{info.auditorUserName || ''}}</view>
			</view>
			<view class="cell flex" style="align-items: flex-start;">
				<view class="hd">车牌号</view>
				<view class="bd">{{info.tCarId || ''}}</view>
			</view>
			<view class="cell flex" style="align-items: flex-start;">
				<view class="hd">调休时间</view>
				<view class="bd">{{info.startTime.split(':')[0] + ':' + info.startTime.split(':')[1]}} 至 {{info.endTime.split(':')[0] + ':' + info.endTime.split(':')[1]}}</view>
			</view>
			<view class="cell flex" style="align-items: flex-start;">
				<view class="hd">调休原因</view>
				<view class="bd">{{info.explain || ''}}</view>
			</view>
			<view class="cell flex" style="align-items: flex-start;">
				<view class="hd">调休图片</view>
				<view class="bd">
					<image :src="item.imgUrls" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" v-if="info.status == 1" @click="review">初审</view>
				<view class="btn-1 middle" v-if="info.status == 22" @click="finalView">初审</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
		
		<u-modal v-model="show" :title="title" :show-cancel-button='true' @confirm='confirmSh'>
			<view class="slot-content">
				<view style="width: 100%; margin-top: 20rpx;" class="flexmid">
					<u-radio-group v-model="value">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled" :label-disabled="false">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="flex" style="align-items: flex-start; padding: 30rpx 20rpx;" v-if="value=='拒绝'">
					<view style="flex-direction: 0; margin-right: 10rpx; font-size: 24rpx;">拒绝理由:</view>
					<textarea v-model="reason" placeholder="请输入" style="flex: 1; border: 1rpx solid #bbb; border-radius: 6rpx; padding: 10rpx; height: 200rpx; font-size: 24rpx;"/>
				</view>
				<u-gap height="20"></u-gap>
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info:{},
				isLoading: false,
				show: false,
				title: '初审',
				queryForm: {
					current: 1,
					size: 10
				},
				value: '',
				radioList: [{
						name: '通过',
						disabled: false
					},
					{
						name: '拒绝',
						disabled: false
					}
				],
				reason: '',
				sel_id: ''
			}
		},
		onLoad(opt) {
			if(opt) console.log('opt:', opt)
			this.id = opt.id
			this.getInfo()
		},
		methods: {
			review(index, id){
				this.title = '初审'
				this.sel_id = id
				this.show = true
			},
			finalView(index, id){
				this.title = '终审'
				this.sel_id = id
				this.show = true
			},
			confirmSh(e){
				if(this.value === '') return this.$Toast.message('请选择是否通过')
				if(this.value === '拒绝' && this.reason === '') return this.$Toast.message('请填写拒绝理由')
				console.log('e', e)
				if(this.title == '初审'){
					this.$Net.post('/carLeave/firstAudit',{
						id: this.sel_id,
						msg: this.reason,
						state: this.value === '通过' ? 'pass' : 'reject'
					}).then(res=>{
						this.$Toast.messageIcon('操作成功')
						this.value = ''
						this.show = false
						this.getList()
					})
				}else{
					this.$Net.post('/carLeave/finalAudit',{
						id: this.sel_id,
						msg: this.reason,
						state: this.value === '通过' ? 'pass' : 'reject'
					}).then(res=>{
						this.$Toast.messageIcon('操作成功')
						this.value = ''
						this.show = false
						this.getList()
					})
				}
			},
			getInfo(){
				this.$Net.get('/carLeave/detail/' + this.id).then(res=>{
					console.log('详情:', res)
					this.info = res.data
					this.isLoading = true
				})
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #f7f7f7; }
</style>

<style lang="scss" scoped>
	// @import './style.scss';
	.foot {
		margin-top: 150rpx;
		width: 100%;
		padding: 30rpx;
	
		.btnBox {
			width: 100%;
	
			.btn-1 {
				flex: 1;
				height: 90rpx;
				background: #1684FC;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 34rpx;
			}
	
			.btn-2 {
				flex: 1;
				height: 90rpx;
				border: 1px solid #1684FC;
				border-radius: 10rpx;
				color: #1684FC;
				font-size: 34rpx;
			}
		}
	}
	.body{
		padding: 40rpx 20rpx;
		background-color: #fff;
		.cell{
			margin-bottom: 30rpx;
			font-size: 28rpx;
			.hd{
				width: 150rpx;
				color: #999;
			}
			.bd{
				color: #000;
				image{
					width: 300rpx;
					height: 300rpx;
				}
			}
		}
	}
	.head{
		width: 100%;
		padding: 35rpx 40rpx;
		background-color: #40A9FF;
		.status{
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
		}
		.time{
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #fff;
			// font-weight: bold;
		}
	}
	.tongguo{
		background-color: #2BBC4A;
	}
	.jujue{
		background-color: #666666;
	}
</style>
